<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <title>reveal.js</title>

        <link rel="stylesheet" href="css/reveal.css">
        <link rel="stylesheet" href="css/theme/black.css">
        <link rel="stylesheet" href="genericons.css">
        <link rel="stylesheet" href="lib/css/zenburn.css">

        <!-- Printing and PDF exports -->
        <script>
            var link = document.createElement( 'link' );
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
            document.getElementsByTagName( 'head' )[0].appendChild( link );
        </script>
        <style>
        .reveal section img {
            border: none;
            background-color: initial;
            margin: 10px;
        }
        .reveal .normal-paragraph {
            text-align: left;
            margin: 0 auto 0 auto;
            width: 60%;
        }
        .reveal .normal-paragraph p {
            text-align: left;
        }
        .header-left {
            position: absolute;
            top: 2%;
            left: 2%;
        }
        .header-right {
            position: absolute;
            top: 2%;
            right: 2%;
        }
        .footer-left {
            position: absolute;
            bottom: 2%;
            left: 2%;
        }
        .reveal .genericon {
          font-family: "genericons";
        }

        .reveal .bio-card {
          background: #333;
          border-radius: 2px;
          display: inline-block;
          width: 260px;
          margin: 1rem;
          position: relative;
          font-size: 20px;
        }

        .reveal .card-photo {
          display: block;
          width: 200px;
          border-top-left-radius: 2px;
          border-top-right-radius: 2px;
          margin: 28px auto 0 auto;
        }

        .reveal .card-header {
          width: 100%;
          font-size: 20px;
          margin-top: 10px;
          text-align: center;
        }

        .reveal .card-info {
          width: 100%;
          float: left;
          font-size: 20px;
          margin-top: 0;
          padding: 0 4px;
          text-align: center;
        }

        .reveal .card-info a {
          text-decoration: none;
          color: #999;
        }

        .reveal .card-info em {
          vertical-align: top;
        }

        .revral .card-info a .genericon {
          vertical-align: middle;
        }

        .reveal .bio-social a {
          text-decoration: none;
        }

        .reveal .bio-photo {
          width: 200px;
          margin: 0 40px 40px -40px;
          float: left;
        }

        .reveal section img {
            box-shadow: none;
        }
        </style>
    </head>
    <body>
        <div id="common" style="z-index: 2;">
            <div class="header-left">
                <img alt="QuantStack" src="quantstack-white.svg" width="30%"/>
            </div>
            <div class="footer-left">
                <div style="color: white; font-family: Source Sans Pro, Helvetica, sans-serif;">
                <img alt="Twitter" src="twitter-white.svg" height="20px"/>
                <img alt="GitHub" src="github-white.svg" height="20px"/>
                <p style="display: inline; vertical-align: top; margin-left: 4px; font-size: 20px;">@SylvainCorlay @QuantStack</p>
                </div>
            </div>
        </div>

        <div class="reveal">
            <div class="slides">
                <section>
                    <img alt="xeus" src="xeus.svg" width="50%"/>
                    <p>Native implementation of the Jupyter protocol</p>
                </section>
                <section>
                    <img alt="QuantStack" src="quantstack-white.svg" width="55%">
                    <div class="team-section-content">
                        <div style="display: inline-block; width: 45%; margin: 30px; vertical-align: top;">
                            <img class="card-photo" alt="Avatar picture" src="sylvain.png">
                            <p class="card-header">Sylvain Corlay</p>
                            <div style="font-size: 20px; text-align: justify; margin: 30px;">
                            <ul>
                                <li>Scientific software developer, Quant researcher, formerly quant at Bloomberg, and adjunct at Columbia and NYU</li>
                                <li>Founded QuantStack in 2016</li>
                                <li>Jupyter core developer (widgets, bqplot, pythreejs)</li>
                            </ul>
                            </div>
                            <div class="card-info" style="display: inline;">
                                <a href="https://github.com/SylvainCorlay" target="_blank">
                                    <span class="genericon genericon-github"></span>
                                    <em>@SylvainCorlay</em>
                                </a>
                            </div>
                            <div class="card-info" style="display: inline;">
                                <a href="https://twitter.com/SylvainCorlay" target="_blank">
                                    <span class="genericon genericon-twitter"></span>
                                    <em>@SylvainCorlay</em>
                                </a>
                            </div>
                        </div>
                        <div style="display: inline-block; width: 45%; margin: 30px; vertical-align: top;">
                            <img class="card-photo" alt="Avatar picture" src="johan.jpg">
                            <p class="card-header">Johan Mabille</p>
                            <div style="font-size: 20px; text-align: justify; margin: 30px;">
                            <ul>
                                <li>Scientific software developer, Quant developer, formerly quant developer at HSBC</li>
                                <li>Joined QuantStack in 2016</li>
                                <li>Co-author of xtensor, xsimd, xeus</li>
                            </ul>
                            </div>
                            <div class="card-info" style="display: inline;">
                                <a href="https://github.com/JohanMabille" target="_blank">
                                    <span class="genericon genericon-github"></span>
                                    <em>@JohanMabille</em>
                                </a>
                            </div>
                            <div class="card-info" style="display: inline;">
                                <a href="https://twitter.com/JohanMabille" target="_blank">
                                    <span class="genericon genericon-twitter"></span>
                                    <em>@JohanMabille</em>
                                </a>
                            </div>
                        </div>
                    </div>
                </section>
                <section>
                    <h2>The Jupyter Architecture</h2>
                    <img alt="Jupyter Architecture" src="jupyter-arch.svg" width="55%"/>
                    <div>
                    <ul>
                        <li>A well defined protocol</li>
                        <li>Implemented for more than 40 languages</li>
                    </ul>
                    </div>
                </section>

                <section>
                    <h2>Implementations of the protocol</h2>
                    <ul>
                        <li>Some kernels have their own implementation of the protocol
                        <ul>
                            <li>Python (ipykernel)</li>
                            <li>R (IRkernel)</li>
                            <li>Julia (IJulia)</li>
                        </ul>
                        </li>
                        <li>Many others make use of the wrapper kernel approach
                        <ul>
                            <li>The Octave and Matlab kernels</li>
                        </ul>
                        </li>
                    </ul>
                </section>

                <section>
                    <h2>On the wrapper kernel approach</h2>
                    <ul style="max-width: 50%;">
                        <li>Dependency on the Python runtime</li>
                        <li>The wrapped interpreter may not have a usable Python API</li>
                        <li>We may need to expose the API of the wrapper to enable widgets</li>
                    </ul>
                    <p style="width: 75%; text-align: left; margin-left: auto; margin-right: auto;">In fact, a kernel is merely an executable
                    implementing an inter-process communication protocol.
                    <strong>It should not need a Python runtime.</strong>
                    </p>
                </section>

                <section>
                    <img alt="xeus" src="xeus.svg" width="50%"/>
                    <ul style="max-width: 50%;">
                        <li>A modern C++ implementation of the Jupyter protocol</li>
                        <li>Enabling kernel authors to create new kernels without having to deal with the protocol.</li>
                    </ul>
                </section>

                <section>
                    <h2>Example: Implementing an echo kernel</h2>
                    <img alt="echo-kernel" src="echo-kernel.png" width="40%"/>
                </section>

                <section>
                    <h2>What can you do with Xeus?</h2>
                    <p>A kernel for the C++ programming language based on cling</p>
                    <div>
                    <img alt="root-logo" src="root-logo.png" width="50%"/>
                    </div>
                    <div>
                    <div class="team-section-content" style="width: 85%; margin-left: auto; margin-right: auto;">
                        <div style="display: inline-block; width: 35%; margin: 30px; vertical-align: top;">
                            <img class="card-photo" alt="Avatar picture" src="axel.jpg">
                            <p class="card-header">Axel Naumann</p>
                        </div>
                        <div style="display: inline-block; width: 35%; margin: 30px; vertical-align: top;">
                            <img class="card-photo" alt="Avatar picture" src="vassil.jpg">
                            <p class="card-header">Vassil Vassilev</p>
                        </div>
                    </div>
                </section>

                <section>
                    <h2>Live demo of Xeus-Cling</h2>
                </section>

                <section>
                    <section>
                        <h2>Scientific computing in the C++ notebook with xtensor</h2>
                        <img alt="xtensor" src="xtensor.svg" style="width: 25%;" />
                        <div style="margin-left: auto; margin-right: auto; width: 70%;">
                        <ul>
                            <li class="fragment">
                                <p>A C++ template library for multi-dimensional array manipulation</p>
                                <img alt="xtensor" src="xtensor.svg" width="12%"/>
                                <ul>
                                    <li>
                                        <p>Followings the idioms of the C++ STL</p>
                                        <p>(iterator pairs, clear value semantics)</p>
                                    </li>
                                    <li>But also an API similar to that of numpy</li>
                                </ul>
                            </li>
                        </ul>
                        </div>
                    </section>
                    <section>
                        <h2>What is xtensor?</h2>
                        <div style="margin-left: auto; margin-right: auto; width: 70%;">
                        <ul>
                            <li class="fragment">
                                <p>Python bindings to enable xtensor APIs on numpy arrays.</p>
                                <img alt="xtensor-python" src="xtensor-python.svg" width="20%"/>
                            </li>
                            <li class="fragment">
                                <p>Julia bindings to enable xtensor APIs on Julia arrays.</p>
                                <img alt="xtensor-julia" src="xtensor-julia.svg" width="20%"/>
                            </li>
                            <li class="fragment">
                                <p>R bindings to enable xtensor APIs on R arrays.</p>
                                <img alt="xtensor-r" src="xtensor-r.svg" width="20%"/>
                            </li>
                            <li class="fragment">
                                <p>Cookiecutter projects for authoring of Python, Julia, and R extensions.</p>
                                <img alt="xtensor-cookiecutter" src="xtensor-cookiecutter.svg" width="20%"/>
                            </li>
                        </ul>
                        </div>
                    </section>
                    <section>
                        <h2>What is xtensor?</h2>
                        <div style="margin-left: auto; margin-right: auto; width: 70%;">
                        <ul>
                            <li class="fragment">
                                <p>BLAS bindings to enable BLAS operations on xtensor expressions.</p>
                                <img alt="xtensor-blas" src="xtensor-blas.svg" width="20%"/>
                            </li>
                            <li class="fragment">
                                <p>SIMD acceleration kernels.</p>
                                <img alt="xsimd" src="xsimd.svg" width="20%"/>
                            </li>
                            <li class="fragment">All open-source (BSD License).</li>
                        </ul>
                        </div>
                    </section>
                </section>
                <section>
                    <style>
                        div.splitting {
                            background-color: rgb(20, 98, 135);
                            width: 50%;
                            height: 800%;
                            position: absolute;
                            top: -200%;
                            left: 0;
                            z-index: -1;
                        }

                        div.left-panel {
                            width: 45%;
                            display: inline-block;
                            margin-right: 5%;
                            vertical-align: top;
                        }

                        div.right-panel {
                            width: 45%;
                            display: inline-block;
                        }

                        code.panel {
                            background-color: initial;
                        }

                        pre.panel {
                            box-shadow: none;
                        }
                    </style>
                    <section>
                        <div class="splitting"></div>
                        <div>
                            <p style="text-align: center; vertical-align: top;">Ever heard of numpy?</p>
                        </div>
                        <div>
                            <div class="left-panel">
                                <p style="text-align: center;"><b>Python 3 - numpy</b></p>
                            </div>
                            <div class="right-panel">
                                <p style="text-align: center;"><b>C++ 14 - xtensor</b></p>
                            </div>
                        </div>
                        <div class="fragment">
                            <div class="left-panel">
                                <pre class="panel"><code class="python panel" data-trim>
                                    np.array([[3, 4], [5, 6]])

                                    arr.reshape([3, 4])
                                </code></pre>
                            </div>
                            <div class="right-panel">
                                <pre class="panel"><code class="cpp panel" data-trim>
                                    xt::xarray&lt;double&gt;({{3, 4}, {5, 6}})
                                    xt::xtensor&lt;double, 2&gt;({{3, 4}, {5, 6}})
                                    arr.reshape({3, 4});
                                </code></pre>
                            </div>
                        </div>
                        <div class="fragment">
                            <div class="left-panel">
                                <pre class="panel"><code class="python panel" data-trim>
                                    np.linspace(1.0, 10.0, 100)
                                    np.logspace(1.0, 10.0, 100)
                                    np.arange(3, 7)
                                    np.eye(4)
                                    np.zeros([3, 4])
                                    np.ones([3, 4])
                                </code></pre>
                            </div>
                            <div class="right-panel">
                                <pre class="panel"><code class="cpp panel" data-trim>
                                    xt::linspace&lt;double&gt;(1.0, 10.0, 100)
                                    xt::logspace&lt;double&gt;(1.0, 10.0, 100)
                                    xt::arange(3, 7)
                                    xt::eye(4)
                                    xt::zeros&lt;double&gt;({3, 4})
                                    xt::ones&lt;double&gt;({3, 4})
                                </code></pre>
                            </div>
                        </div>
                    </section>
                    <section>
                        <div class="splitting"></div>
                        <div>
                            <div class="left-panel">
                                <p style="text-align: center;"><b>Python 3 - numpy</b></p>
                            </div>
                            <div class="right-panel">
                                <p style="text-align: center;"><b>C++ 14 - xtensor</b></p>
                            </div>
                            <div class="left-panel">
                                <pre class="panel"><code class="python panel" data-trim>
                                    a[:, np.newaxis]
                                    a[:5, 1:]
                                    a[5:1:-1, :]
                                    np.broadcast(a, [4, 5, 7])
                                    np.vectorize(f)
                                    a[a &gt; 5]
                                    a[[0, 1], [0, 0]]
                                </code></pre>
                            </div>
                            <div class="right-panel">
                                <pre class="panel"><code class="cpp panel" data-trim>
                                    xt::view(a, xt::all(), xt::newaxis())
                                    xt::view(a, xt::range(_, 5), xt::range(1, _))
                                    xt::view(a, xt::range(5, 1, -1), xt::all())
                                    xt::broadcast(a, {4, 5, 7})
                                    xt::vectorize(f)
                                    xt::filter(a, a &gt; 5)
                                    xt::index_view(a, {{0, 0}, {1, 0}})
                                </code></pre>
                            </div>
                        </div>
                        <div class="fragment">
                            <div class="left-panel">
                                <pre class="panel"><code class="python panel" data-trim>
                                    np.sum(a, axis=[0, 1])
                                    np.sum(a)
                                    np.prod(a, axis=1)
                                    np.prod(a)
                                    np.mean(a, axis=1)
                                    np.mean(a)
                                </code></pre>
                            </div>
                            <div class="right-panel">
                                <pre class="panel"><code class="cpp panel" data-trim>
                                    xt::sum(a, {0, 1})
                                    xt::sum(a)
                                    xt::prod(a, {1})
                                    xt::prod(a)
                                    xt::mean(a, {1})
                                    xt::mean(a)
                                </code></pre>
                            </div>
                        </div>
                    </section>
                    <section>
                        <div class="splitting"></div>
                        <div>
                            <div class="left-panel">
                                <p style="text-align: center;"><b>Python 3 - numpy</b></p>
                            </div>
                            <div class="right-panel">
                                <p style="text-align: center;"><b>C++ 14 - xtensor</b></p>
                            </div>
                            <div class="left-panel">
                                <pre class="panel"><code class="python panel" data-trim>
                                    np.where(a &gt; 5, a, b)
                                    np.where(a &gt; 5)
                                    np.any(a)
                                    np.all(a)
                                    np.logical_and(a, b)
                                    np.logical_or(a, b)
                                </code></pre>
                            </div>
                            <div class="right-panel">
                                <pre class="panel"><code class="cpp panel" data-trim>
                                    xt::where(a &gt; 5, a, b)
                                    xt::where(a &gt; 5)
                                    xt::any(a)
                                    xt::all(a)
                                    a &amp;&amp; b
                                    a || b
                                </code></pre>
                            </div>
                        </div>
                        <div class="fragment">
                            <div class="left-panel">
                                <pre class="panel"><code class="python panel" data-trim>
                                    np.absolute(a)
                                    np.exp(a)
                                    np.sqrt(a)
                                    np.cos(a)
                                    np.cosh(a)
                                    scipy.special.erf(a)
                                    np.isnan(a)
                                </code></pre>
                            </div>
                            <div class="right-panel">
                                <pre class="panel"><code class="cpp panel" data-trim>
                                    xt::abs(a)
                                    xt::exp(a)
                                    xt::sqrt(a)
                                    xt::cos(a)
                                    xt::cosh(a)
                                    xt::erf(a)
                                    xt::isnan(a)
                                </code></pre>
                            </div>
                        </div>
                    </section>
                    <section>
                        <div class="splitting"></div>
                        <div>
                            <div class="left-panel">
                                <p style="text-align: center;"><b>Python 3 - numpy</b></p>
                            </div>
                            <div class="right-panel">
                                <p style="text-align: center;"><b>C++ 14 - xtensor</b></p>
                            </div>
                            <div class="left-panel">
                                <pre class="panel"><code class="python panel" data-trim>
                                    np.random.seed(0)
                                    np.random.randn(10, 10)
                                    np.random.randint(10, 10)
                                    np.random.rand(3, 4)
                                </code></pre>
                            </div>
                            <div class="right-panel">
                                <pre class="panel"><code class="cpp panel" data-trim>
                                    xt::random::seed(0)
                                    xt::random::randn&lt;double&gt;({10, 10})
                                    xt::random::randint&lt;int&gt;({10, 10}})
                                    xt::random::rand&lt;double&gt;({3, 4}})
                                </code></pre>
                            </div>
                        </div>
                        <div class="fragment">
                            <div class="left-panel">
                                <pre class="panel"><code class="python panel" data-trim>
                                    np.stack([a, b, c], axis=1)
                                    np.concatenate([a, b, c], axis=1)
                                </code></pre>
                            </div>
                            <div class="right-panel">
                                <pre class="panel"><code class="cpp panel" data-trim>
                                    xt::stack(xtuple(a, b, c), 1)
                                    xt::concatenate(xtuple(a, b, c), 1)
                                </code></pre>
                            </div>
                        </div>
                    </section>
                </section>
                </section>
                <section>
                    <section>
                        <p>And much more</p>
                        <ul>
                            <li>Missing values</li>
                            <li>Fancy indexing</li>
                            <li>Broadcasting and universal functions</li>
                            <li>Linear algebra</li>
                            <li>Language bindings</li>
                            <li>Lazy computing</li>
                            <li>Views on array expressions</li>
                        </ul>
                    </section>
                </section>

                <section>
                    <h2>Live demo of xtensor + xeus</h2>
                </section>

                <section>
                    <h2>Jupyter interactive widgets</h2>
                    <p>Another area where Jupyter shines is Jupyter interactive widgets</p>
                    <img alt="bqplot" src="bqplot-election.gif" width="40%;"/>
                </section>
                <section>
                    <p>Jupyter interactive widgets: thick front-end and thin back-end</p>
                    <img alt="widgets-arch" src="widgets-arch.png" width="60%;"/>
                </section>

                <section>
                    <p>Jupyter interactive widgets: thick front-end and thin back-end</p>
                    <img alt="model-declaration" src="model-declaration.png" width="60%;"/>
                </section>

                <section>
                     <p>The foundations for a C++ backend for Jupyter interactive widgets</p>
                     <ul>
			 <li>An implementation of the observer pattern (traitlets): xproperty</li>
                         <li>The implementation of the Jupyter widgets communication protocol: xwidgets</li>
                     </ul>
                </section>

                <section>
                    <h2>Live demo of xwidgets</h2>
                </section>

                <section>
                    <p>Credits</p>
                    <div class="team-section-content">
                        <div class="bio-card">
                            <img class="card-photo" alt="Avatar picture" src="sylvain.png">
                            <p class="card-header">Sylvain Corlay</p>
                            <div class="card-info">
                                <a href="https://github.com/SylvainCorlay" target="_blank">
                                    <span class="genericon genericon-github"></span>
                                    <em>@SylvainCorlay</em>
                                </a>
                            </div>
                            <div class="card-info">
                                <a href="https://twitter.com/SylvainCorlay" target="_blank">
                                    <span class="genericon genericon-twitter"></span>
                                    <em>@SylvainCorlay</em>
                                </a>
                            </div>
                        </div>
                        <div class="bio-card">
                            <img class="card-photo" alt="Avatar picture" src="johan.jpg">
                            <p class="card-header">Johan Mabille</p>
                            <div class="card-info">
                                <a href="https://github.com/JohanMabille" target="_blank">
                                    <span class="genericon genericon-github"></span>
                                    <em>@JohanMabille</em>
                                </a>
                            </div>
                            <div class="card-info">
                                <a href="https://twitter.com/JohanMabille" target="_blank">
                                    <span class="genericon genericon-twitter"></span>
                                    <em>@JohanMabille</em>
                                </a>
                            </div>
                        </div>
                        <div class="bio-card">
                            <img class="card-photo" alt="Avatar picture" src="loic.jpg">
                            <p class="card-header">Loic Gouarin</p>
                            <div class="card-info">
                                <a href="https://github.com/gouarin" target="_blank">
                                    <span class="genericon genericon-github"></span>
                                    <em>@gouarin</em>
                                </a>
                            </div>
                            <div class="card-info">
                                <a href="https://twitter.com/lgouarin" target="_blank">
                                    <span class="genericon genericon-twitter"></span>
                                    <em>@lgouarin</em>
                                </a>
                            </div>
                        </div>
                    </div>
                </section>
                <section>
                    <h2>Resources:</h2>
                    <p>GitHub</p>
                    <ul>
                        <li>xeus: https://github.com/QuantStack/xeus/</li>
                        <li>xeus-cling: https://github.com/QuantStack/xeus-cling/</li>
                        <li>xproperty: https://github.com/QuantStack/xproperty/</li>
                        <li>xtensor: https://github.com/QuantStack/xtensor/</li>
                        <li>xtensor-blas: https://github.com/QuantStack/xtensor-blas/</li>
                        <li>xtensor-python: https://github.com/QuantStack/xtensor-python/</li>
                        <li>xtensor-r: https://github.com/QuantStack/xtensor-r/</li>
                        <li>xtensor-julia: https://github.com/QuantStack/xtensor-julia/</li>
                        <li>xsimd: https://github.com/QuantStack/xsimd/</li>
                        <li>xtensor-fftw: https://github.com/egpbos/xtensor-fftw/</li>
                        <li>xwidgets: https://github.com/QuantStack/xwidgets/</li>
                    </ul>
                </section>

                <section>
                    <h2>Resources:</h2>
                    <p>Documentation</p>
                    <ul>
                        <li>https://xeus.readthedocs.io/en/latest/</li>
                        <li>https://xproperty.readthedocs.io/en/latest/</li>
                        <li>https://xtensor.readthedocs.io/en/latest/</li>
                        <li>https://xtensor-python.readthedocs.io/en/latest/</li>
                        <li>https://xtensor-julia.readthedocs.io/en/latest/</li>
                        <li>https://xtensor-r.readthedocs.io/en/latest/</li>
                        <li>https://xsimd.readthedocs.io/en/latest/</li>
                    </ul>
                </section>

                <section>
                    <h2>The End</h2>
                </section>
            </div>
        </div>

        <script src="lib/js/head.min.js"></script>
        <script src="js/reveal.js"></script>

        <script>
            // More info https://github.com/hakimel/reveal.js#configuration
            Reveal.initialize({
                history: true,
                width: "100%",
                height: "100%",
                margin: 0,
                minScale: 1,
                maxScale: 1,

                // More info https://github.com/hakimel/reveal.js#dependencies
                dependencies: [
                    { src: 'plugin/markdown/marked.js' },
                    { src: 'plugin/markdown/markdown.js' },
                    { src: 'plugin/notes/notes.js', async: true },
                    { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
                ]
            });
        </script>
    </body>
</html>
